<template>
  <view class="container">
    <view class="header">
      <text class="menu-icon">☰</text>
      <text class="title">胜利商城</text>
      <view class="cart-icon">
        <text>🛒</text>
        <view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view>
      </view>
    </view>
    <view class="search-bar">
      <input type="text" placeholder="搜索所需要的产品" class="search-input" />
      <button class="search-button">🔍</button>
    </view>
    <view class="content">
      <scroll-view class="category-scroll" scroll-y>
        <view class="categories">
          <view class="category-item" 
                v-for="(item, index) in categories" 
                :key="index"
                :class="{ active: currentCategory === index }"
                @click="selectCategory(index)">
            <text>{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
      <scroll-view class="product-scroll" scroll-y>
        <view class="product-list">
          <view class="product-item" v-for="(product, index) in currentProducts" :key="index" @click="navigateToDetail(product)">
            <image :src="product.image" mode="aspectFill" class="product-image"></image>
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <text class="product-price">¥{{ product.price }}</text>
              <text class="product-sales">月销 {{ product.sales || 0 }}</text>
            </view>
            <view class="cart-button" @click.stop="addToCart(product)">
              <text>🛒</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      cartCount: 0,
      categories: [
        { name: '生鲜水果', id: 'fruit' },
        { name: '新鲜时蔬', id: 'vegetable' },
        { name: '粮调味干货', id: 'seasoning' },
        { name: '农家自打油', id: 'oil' },
        { name: '禽畜肉蛋', id: 'meat' },
        { name: '手工物品', id: 'handicraft' },
        { name: '中药材', id: 'medicine' },
        { name: '农副加工', id: 'processed' }
      ],
      allProducts: {
        fruit: [
          { id: 1, name: '红富士苹果', price: 12.8, sales: 256, image: '/static/images/product.jpg', description: '新鲜采摘，甜脆多汁' },
          { id: 2, name: '阳光玫瑰葡萄', price: 25.8, sales: 189, image: '/static/images/product.jpg', description: '无籽葡萄，香甜可口' },
          { id: 3, name: '赣南脐橙', price: 15.8, sales: 312, image: '/static/images/product.jpg', description: '果肉细腻，汁多味甜' }
        ],
        vegetable: [
          { id: 4, name: '有机青菜', price: 8.8, sales: 456, image: '/static/images/product.jpg', description: '无农药，新鲜采摘' },
          { id: 5, name: '红萝卜', price: 6.8, sales: 289, image: '/static/images/product.jpg', description: '甜脆可口，营养丰富' },
          { id: 6, name: '有机番茄', price: 12.8, sales: 378, image: '/static/images/product.jpg', description: '自然成熟，酸甜适中' }
        ],
        seasoning: [
          { id: 7, name: '农家辣椒酱', price: 18.8, sales: 156, image: '/static/images/product.jpg', description: '传统工艺，香辣可口' },
          { id: 8, name: '野生香菇', price: 28.8, sales: 98, image: '/static/images/product.jpg', description: '深山采摘，营养丰富' },
          { id: 9, name: '农家腊肉', price: 45.8, sales: 167, image: '/static/images/product.jpg', description: '传统腌制，风味独特' }
        ],
        oil: [
          { id: 10, name: '纯正菜籽油', price: 68.8, sales: 89, image: '/static/images/product.jpg', description: '传统压榨，香味浓郁' },
          { id: 11, name: '花生油', price: 78.8, sales: 76, image: '/static/images/product.jpg', description: '低温压榨，营养丰富' }
        ],
        meat: [
          { id: 12, name: '土鸡蛋', price: 15.8, sales: 567, image: '/static/images/product.jpg', description: '散养土鸡，营养丰富' },
          { id: 13, name: '农家土猪肉', price: 38.8, sales: 234, image: '/static/images/product.jpg', description: '散养土猪，肉质鲜美' }
        ],
        handicraft: [
          { id: 14, name: '手工竹编', price: 88.8, sales: 45, image: '/static/images/product.jpg', description: '传统工艺，精美实用' },
          { id: 15, name: '手工陶器', price: 128.8, sales: 32, image: '/static/images/product.jpg', description: '纯手工制作，艺术收藏' }
        ],
        medicine: [
          { id: 16, name: '野生灵芝', price: 188.8, sales: 28, image: '/static/images/product.jpg', description: '深山野生，品质上乘' },
          { id: 17, name: '铁皮石斛', price: 158.8, sales: 35, image: '/static/images/product.jpg', description: '人工种植，品质保证' }
        ],
        processed: [
          { id: 18, name: '红薯粉条', price: 25.8, sales: 156, image: '/static/images/product.jpg', description: '传统工艺，口感筋道' },
          { id: 19, name: '农家豆腐', price: 12.8, sales: 289, image: '/static/images/product.jpg', description: '传统工艺，豆香浓郁' }
        ]
      }
    };
  },
  computed: {
    currentProducts() {
      return this.allProducts[this.categories[this.currentCategory].id] || [];
    }
  },
  methods: {
    selectCategory(index) {
      this.currentCategory = index;
    },
    addToCart(product) {
      this.cartCount++;
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      });
    },
    navigateToDetail(product) {
      // 构建完整的商品信息
      const productInfo = {
        id: product.id,
        name: product.name,
        price: product.price,
        image: product.image,
        description: product.description,
        sales: product.sales,
        category: this.categories[this.currentCategory].name
      };
      
      // 跳转到新的商品详情页
      uni.navigateTo({
        url: `/pages/spxq/detail?productInfo=${encodeURIComponent(JSON.stringify(productInfo))}`
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.menu-icon, .cart-icon {
  font-size: 40rpx;
  padding: 10rpx;
}

.cart-icon {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff4d4f;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 30rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.search-bar {
  display: flex;
  justify-content: center;
  padding: 20rpx;
  background-color: #fff;
}

.search-input {
  width: 80%;
  padding: 20rpx;
  border-radius: 40rpx;
  border: none;
  background-color: #f5f5f5;
  font-size: 28rpx;
}

.search-button {
  margin-left: 20rpx;
  padding: 20rpx 30rpx;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 40rpx;
}

.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.category-scroll {
  width: 200rpx;
  background-color: #fff;
}

.categories {
  padding: 20rpx 0;
}

.category-item {
  padding: 30rpx 20rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  border-left: 6rpx solid transparent;
  transition: all 0.3s;
}

.category-item.active {
  background-color: #f8f8f8;
  color: #4CAF50;
  border-left-color: #4CAF50;
  font-weight: bold;
}

.product-scroll {
  flex: 1;
  padding: 20rpx;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  width: 48%;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.product-image {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.product-info {
  padding: 20rpx;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.product-price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.product-sales {
  font-size: 24rpx;
  color: #999;
}

.cart-button {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 2rpx 10rpx rgba(76,175,80,0.3);
}
</style>